* {
  margin: 0; padding: 0; box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
      background: var(--bg-primary);
      color: var(--text-primary);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      padding: 20px;
      transition: background 0.3s, color 0.3s;
}

:root {
  --bg-primary: #0e0e12;
      --bg-secondary: #16161e;
      --bg-card: #17171f;
      --border-color: #24242e;
      --text-primary: #e4e4e7;
      --text-secondary: #8a8a9a;
      --orange: #f97316;
      --orange-dark: #ea580c;
}

.light-theme {
  --bg-primary: #f0f0f4;
      --bg-secondary: #e8e8ee;
      --bg-card: #ffffff;
      --border-color: #d0d0d8;
      --text-primary: #1a1a22;
      --text-secondary: #5a5a6a;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--orange); border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--orange-dark);
}

.app {
  max-width: 1400px; width: 100%;
}

@keyframes modalFade {
  from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); }
}

@keyframes spin {
  to { transform:rotate(360deg); }
}

.popup-overlay.hidden {
  display: none;
}

@keyframes fadeIn {
  from { opacity:0; } to { opacity:1; }
}

@keyframes popScale {
  from { transform:scale(0.94); opacity:0; } to { transform:scale(1); opacity:1; }
}

.text-muted {
  color: var(--text-secondary); font-size: 14px;
}

.hidden {
  display: none !important;
}

@media (max-width: 700px) {
  /* minimal mobile support */
}

.modal-episode-grid::-webkit-scrollbar {
  width: 4px;
}

.modal-episode-grid::-webkit-scrollbar-track {
  background: transparent;
}

.modal-episode-grid::-webkit-scrollbar-thumb {
  background: var(--border-color); border-radius: 8px;
}